You can use the Kanzi Engine API to create animations and timelines:
From-to animation defines from which to which value to change the value of a property. You can omit either of these values to animate either from the current value or to the current value of the property. From-to animations use an easing curve that defines the rate of change for the animation. You can use one of the easing curves that comes with Kanzi, or define your own.
To create a from-to animation:
// Create a from-to animation that uses the linear easing function and is two seconds long. // As a starting value, the animation takes the current value of the property in the node you want to animate. // The animation sets the final value of the property in the node you animate to 200. // You set which node this animation animates in the timeline. FloatLinearFromToAnimationSharedPtr linearAnimation = FloatLinearFromToAnimation::create(domain, chrono::seconds(2), nullopt, 200.0f);
To animate a property value in a node using a from-to animation:
// Create a property timeline and apply the linearAnimation from-to animation to the Layout Width property // to animate the width of the current node. PropertyAnimationTimelineSharedPtr propertyTimeline = PropertyAnimationTimeline::create(domain, ".", Node::WidthProperty, linearAnimation);
To animate a property field value in a node using a from-to animation:
// Create a property field animation timeline and apply it to the Render Transformation property of the current node. PropertyFieldAnimationTimelineSharedPtr propertyFieldTimeline = PropertyFieldAnimationTimeline::create(domain, ".", Node2D::RenderTransformationProperty); // Scale the current node on the x axis by animating the Scale X property field of the Render Transformation property // with the linearAnimation from-to animation. propertyFieldTimeline->addEntry(PropertyFieldScaleX, linearAnimation);
To create a float from-to animation that uses the back easing curve and the ease out easing mode:
// Define the FloatBackFromToAnimation to use float values and Back easing function. typedef FromToAnimation<float, BackEasingFunction> FloatBackFromToAnimation; typedef shared_ptr<FloatBackFromToAnimation> FloatBackFromToAnimationSharedPtr; // Create a from-to animation that uses the back easing function and is 5000 milliseconds long. // The animation sets the starting value of the property in the node you want to animate to 100, // and the final value of that property to 300. FloatBackFromToAnimationSharedPtr backAnimation = FloatBackFromToAnimation::create(domain, chrono::milliseconds(5000), nullopt, 300.0f); // Set the easing mode of the backAnimation from-to animation to Ease out. backAnimation->setEasingMode(AnimationEaseOut);
To play an animation regardless of the timeline type:
// Create the playback context and the timeline playback for the node defined in the item2d. SceneGraphTimelinePlaybackContext context(*item2d); // Create the playback for the timeline defined in the propertyFieldTimeline. TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context); // Start the animation. domain->getRootTimelineClock()->addTimelinePlayback(playback);
Keyframe animation uses keyframes that define the property value and time at which the animation reaches that value. In Kanzi you can create linear, step, and Bézier spline keyframes.
To create a keyframe animation:
// Create a float keyframe animation. FloatKeyframeAnimationSharedPtr keyframeAnimation = FloatKeyframeAnimation::create(domain); // Create and add keyframes to the keyframe animation. This keyframe animation contains two linear keyframes. // Create a linear keyframe at second 0 with the value 0. keyframeAnimation->addLinearKeyframe(chrono::seconds::zero(), 0.0f); // Create a linear keyframe at second 1 with the value 100. keyframeAnimation->addLinearKeyframe(chrono::seconds(1), 100.0f);
To animate a property value in a node using a keyframe animation:
// Create a property timeline and apply the keyframeAnimation keyframe animation to the Layout Width property // to animate the width of the current node. PropertyAnimationTimelineSharedPtr propertyTimeline = PropertyAnimationTimeline::create(domain, ".", Node2D::WidthProperty, keyframeAnimation);
To animate a property field value in a node using a keyframe animation:
// Create a property field animation timeline and apply it to the Render Transformation property of the current node. PropertyFieldAnimationTimelineSharedPtr propertyFieldTimeline = PropertyFieldAnimationTimeline::create(domain, ".", Node2D::RenderTransformationProperty); // Rotate the current node by animating the Rotation Z property field of the Render Transformation property // with the keyframeAnimation keyframe animation. propertyFieldTimeline->addEntry(PropertyFieldRotationZ, keyframeAnimation);
To create a keyframe animation that uses Bezier keyframes to move an object on a sideways figure eight shaped path:
// Create two float keyframe animations: one to animate the object on the x axis, // the other to animate the object on the y axis. // Create float keyframe animation keyframeAnimationX that uses linear keyframes // to animate the movement of the object on the x axis. FloatKeyframeAnimationSharedPtr keyframeAnimationX = FloatKeyframeAnimation::create(domain); // Create a linear keyframe at second 0 with the value 0. keyframeAnimationX->addLinearKeyframe(chrono::seconds::zero(), 0.0f); // Create a linear keyframe at second 4 with the value 4. // At this keyframe the object reaches the furthest point on the x axis. keyframeAnimationX->addLinearKeyframe(chrono::seconds(4), 4.0f); // Create a linear keyframe at second 8 with the value 0. // At this keyframe the object returns to the same position it had at the first keyframe. keyframeAnimationX->addLinearKeyframe(chrono::seconds(8), 0.0f); // Create float keyframe animation keyframeAnimationY that uses Bezier keyframes // to animate the movement of the object on the y axis. FloatKeyframeAnimationSharedPtr keyframeAnimationY = FloatKeyframeAnimation::create(domain); // Create a linear keyframe at second 0 with the value 0. When you use Bezier keyframes, // you can use any type of keyframe for the first keyframe, because you need this keyframe // only to provide the information for the starting position. keyframeAnimationY->addLinearKeyframe(chrono::seconds::zero(), 0.0f); // Create a Bezier keyframe at second 4 with the value 0 and two control points. // You use the control points to set the position of the keyframe. keyframeAnimationY->addBezierKeyframe(chrono::seconds(4), 0.0f, Vector2(0.5f, 4.0f), Vector2(0.5f, -4.0f)); // Create a Bezier keyframe at second 8 with the value 0 and two control points. // This keyframe uses the same control points, but because the keyframeAnimationX // animation moves the object on the x axis back to its starting position, this keyframe // is a mirror image of the previous keyframe. keyframeAnimationY->addBezierKeyframe(chrono::seconds(8), 0.0f, Vector2(0.5f, 4.0f), Vector2(0.5f, -4.0f)); // Create a property field animation timeline and apply it to the Render Transformation property of the current node. PropertyFieldAnimationTimelineSharedPtr timeline = PropertyFieldAnimationTimeline::create(domain, ".", Node3D::RenderTransformationProperty); // Move the current node on the x axis by animating the Translation X property field of the Render Transformation property // with the keyframeAnimationX keyframe animation. timeline->addEntry(PropertyFieldTranslationX, keyframeAnimationX); // Move the current node on the y axis by animating the Translation Y property field of the Render Transformation property // with the keyframeAnimationY keyframe animation. timeline->addEntry(PropertyFieldTranslationY, keyframeAnimationY);
To play an animation regardless of the timeline type:
// Create the playback context and the timeline playback for the node defined in the item2d. SceneGraphTimelinePlaybackContext context(*item2d); // Create the playback for the timeline defined in the propertyFieldTimeline. TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context); // Start the animation. domain->getRootTimelineClock()->addTimelinePlayback(playback);
Property timeline applies an animation to a property of an object. For example, to change the layout size of an Image node, use the property timeline to animate the Layout Width and Layout Height properties of the node.
To create a property timeline:
// Create a property timeline and apply the linearAnimation animation to the Layout Width property // to animate the width of the current node. PropertyAnimationTimelineSharedPtr propertyTimeline = PropertyAnimationTimeline::create(domain, ".", Node::WidthProperty, linearAnimation);
To play an animation regardless of the timeline type:
// Create the playback context and the timeline playback for the node defined in the item2d. SceneGraphTimelinePlaybackContext context(*item2d); // Create the playback for the timeline defined in the propertyFieldTimeline. TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context); // Start the animation. domain->getRootTimelineClock()->addTimelinePlayback(playback);
Property field timeline applies an animation to one or more fields of a property of an object. For example, you can use a separate animation for each color channel to change the color of the text in a Text Block node.
To create a property field timeline:
// Create a property field timeline and apply it to the Render Transformation property of the current node. PropertyFieldAnimationTimelineSharedPtr propertyFieldTimeline = PropertyFieldAnimationTimeline::create(domain, ".", Node2D::RenderTransformationProperty); // Scale the current node on the x axis by animating the Scale X property field of the Render Transformation property // with the linearAnimation animation. propertyFieldTimeline->addEntry(PropertyFieldScaleX, linearAnimation);
To play an animation regardless of the timeline type:
// Create the playback context and the timeline playback for the node defined in the item2d. SceneGraphTimelinePlaybackContext context(*item2d); // Create the playback for the timeline defined in the propertyFieldTimeline. TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context); // Start the animation. domain->getRootTimelineClock()->addTimelinePlayback(playback);
Parallel timeline allows you to group timelines which Kanzi plays at the same time. A parallel timeline ends when the animations in the last child timeline end. Use this timeline to organize collections of timelines and create a composition of timelines.
To create a parallel timeline:
// Create a parallel timeline. ParallelTimelineSharedPtr parallelTimeline = ParallelTimeline::create(domain); // Add propertyTimeline and propertyFieldTimeline timelines to the parallel timeline. Parallel timeline plays // both timelines at the same time. parallelTimeline->addChild(propertyTimeline); parallelTimeline->addChild(propertyFieldTimeline);
To play an animation regardless of the timeline type:
// Create the playback context and the timeline playback for the node defined in the item2d. SceneGraphTimelinePlaybackContext context(*item2d); // Create the playback for the timeline defined in the propertyFieldTimeline. TimelinePlaybackSharedPtr playback = propertyFieldTimeline->createPlayback(context); // Start the animation. domain->getRootTimelineClock()->addTimelinePlayback(playback);
Tutorial: Create keyframe animations
Animating a node for the duration of its lifetime
Changing the interpolation mode between keyframes
